<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>仿英雄联盟网页</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 头部导航栏 -->
    <div class="top_nav_bg">
        <div class="top_nav">
            <!-- 网页中的logo -->
            <div class="logo">
                <!-- <a href="#">
                    <h1>英雄联盟</h1>
                </a> -->
            </div>
            <!-- 导航中的搜索 -->
            <div class="nav_list">
                <ul>
                    <li>
                        <a href="#">
                            <p>游戏资料</p>
                            <span>GAME INFo</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>商城|合作</p>
                            <span>STORE</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>社区互动</p>
                            <span>COMMUNITY</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>赛事官网</p>
                            <span>ESPORTS</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>自助系统</p>
                            <span>SYSTEM</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 用户信息 -->
            <div class="user_information">
                <div class="user_yuan">
                    <img src="img/default.png" alt="玩家图像">
                </div>
                <div class="user_zi">
                    <p>亲爱的召唤师,欢迎
                        <a href="#">登录</a>
                    </p>
                </div>
            </div>
            <!-- 掌盟图标  -->
            <a href="#" class="zhangmeng">
                <i></i>
            </a>
            <!-- 掌盟二维码 -->
            <div class="head_app_hover">
                <div class="head_zm_qrcode">
                    <!-- <img src="img/zm-qrcode-new.jpg" alt="掌盟APP二维码">
                -->
                </div>
                <p class="zm">扫码下载掌上英雄联盟</p>
                <img class="polo" src="img/polo.gif">
            </div>
            <!-- 搜索按钮 -->
            <a href="#" class="screen">
                <i></i>
            </a>
        </div>
    </div>
    <!-- 适应手机端的头部导航栏 -->
    <div class="sh_nav_list">
        <ul>
            <li>
                <p>游戏资料</p>
            </li>
            <li>
                <p>商城|合作</p>
            </li>
            <li>
                <p>社区互动</p>
            </li>
            <li>
                <p>赛事官网</p>
            </li>
            <li>
                <p>自助系统</p>
            </li>
        </ul>
    </div>
    </div>
    <!-- 头部广告 -->
    <div class="top_advertisement">
        <div class="word ">
            <a href=""></a>
        </div>
        <div class="banben">
            <p>当前游戏版本：<b>Ver11.23</b></p>
            <a href="">版本详情</a>
        </div>
    </div>
    <!-- 头部广告结束 -->
    <!-- 首页内容 -->
    <div class="max_box">
        <div class="game_index1">
            <div class="row rowFather">
                <!-- 左侧栏 -->
                <div class="banner col-md-7 col-sm-12">
                    <ul>
                        <li>
                            双城之战宝典
                            <img src="img/c36902120d0a96273327f9ae3d093ed5.jpeg">
                        </li>
                        <li>
                            2022季前赛开启
                            <img src="img/78a49812838075c49e7bd5187ae4f191.jpeg">
                        </li>
                        <li>
                            英雄联盟首部动画剧集
                            <img src="img/756475a265663aef46ee23a50be198f8.jpeg">
                        </li>
                        <li>
                            双人作战 正式上线
                            <img src="img/4b475d23b51908944c3ecb87a3dd6b8a.jpeg">
                        </li>
                        <li>
                            每周优惠
                            <img src="img/1e213ce2c8db833646bf451ee5ef883a.jpeg">
                        </li>
                    </ul>
                </div>
                <!-- 左侧栏结束 -->
                <!-- 右侧栏 -->
                <div class="news col-md-5 col-sm-12">
                    <ul class="mean_one">
                        <li class="list_one">
                            <span>综合</span>
                            <ul class="mean_two-li">
                                <h4>《不一样的双城之战》第六期：双城结局引猜...</h4>
                                <li>
                                    <p>公告</p>
                                    <a href="#">庆祝DKG勇夺英雄联盟手游破晓</a>
                                    <span class="time">11-22</span>
                                </li>
                                <li>
                                    <p>赛事</p>
                                    <a href="#">英雄联盟电竞赛事打破全球总决赛收视记录</a>
                                    <span class="time">11-22</span>
                                </li>
                                <li>
                                    <p>视频</p>
                                    <a href="#">《不一样的双城之战》第5期：骆韵希然泪目...</a>
                                    <span class="time">11-21</span>
                                </li>
                                <li>
                                    <p>视频</p>
                                    <a href="#">双城之战动画第二季敬请期待</a>
                                    <span class="time">11-21</span>
                                </li>
                                <li>
                                    <p>公告</p>
                                    <a href="#">永恒星碑数据异常公告</a>
                                    <span class="time">11-19</span>
                                </li>
                                <li>
                                    <p>新闻</p>
                                    <a href="#">终极魔典回归，B站达人招募进行中</a>
                                    <span class="time">11-19</span>
                                </li>
                            </ul>
                        </li>
                        <li class="list_one">
                            <span>公告</span>
                            <!-- <ul class="mean_two-li"> -->
                                <!-- <h4>《不一样的双城之战》第六期：双城结局引猜...</h4> -->
                                <!-- <li> -->
                                    <!-- <p>公告</p> -->
                                    <!-- <a href="#">庆祝DKG勇夺英雄联盟手游破晓</a> -->
                                    <!-- <span class="time">11-22</span> -->
                                <!-- </li> -->
                                <!-- <li></li> -->
                                <!-- <li></li> -->
                                <!-- <li></li> -->
                                <!-- <li></li> -->
                                <!-- <li></li> -->
                            <!-- </ul> -->
                        <!-- </li> -->
                        <li class="list_one"> 
                            <span>赛事</span>
                            <!-- <ul class="mean_two-li"> -->
                                <!-- <h4>《不一样的双城之战》第六期：双城结局引猜...</h4> -->
                                <!-- <li> -->
                                    <!-- <p>公告</p> -->
                                    <!-- <a href="#">庆祝DKG勇夺英雄联盟手游破晓</a> -->
                                    <!-- <span class="time">11-22</span> -->
                                <!-- </li> -->
                                <!-- <li></li> -->
                                <!-- <li></li> -->
                                <!-- <li></li> -->
                                <!-- <li></li> -->
                                <!-- <li></li> -->
                            <!-- </ul> -->
                        </li>
                        <li class="list_one"> 
                            <span>攻略</span>
                            <!-- <ul class="mean_two-li"> -->
                                <!-- <h4>《不一样的双城之战》第六期：双城结局引猜...</h4> -->
                                <!-- <li> -->
                                    <!-- <p>公告</p> -->
                                    <!-- <a href="#">庆祝DKG勇夺英雄联盟手游破晓</a> -->
                                    <!-- <span class="time">11-22</span> -->
                                <!-- </li> -->
                                <!-- <li></li> -->
                                <!-- <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul> -->
                        </li>
                        <li class="list_one">
                            <span>社区</span>
                            <!-- <ul class="mean_two-li">
                                <h4>《不一样的双城之战》第六期：双城结局引猜...</h4>
                                <li>
                                    <p>公告</p>
                                    <a href="#">庆祝DKG勇夺英雄联盟手游破晓</a>
                                    <span class="time">11-22</span>
                                </li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul> -->
                        </li>
                    </ul>
                    <a href="#">阅读更多
                        <span>最新资讯→</span>
                    </a>
                </div>
                <!-- 右侧栏结束 -->
            </div>
        <div class="hot row">
            <!-- 热门活动的头部 -->
            <div class="hot_act col-md-7 col-sm-12">
                <div class="hot_top">
                    <h2>热门活动</h2>
                    <div class="hot_title">
                        <ul>
                            <li class="check">
                                正在进行
                            </li>
                            <li>
                                商城特惠
                            </li>
                            <li>
                                长期活动
                            </li>
                            <div class="more">
                                <a href="#">更多</a>
                            </div>
                        </ul>
                    </div>
                </div>
                <!-- 热门活动的内容 -->
                <div class="hot_content">
                    <ul class="row">
                        <li class="col-md-3 col-sm-6">
                            <a href="#">
                                <div class="hot_list_top">
                                    <img src="img/lol__1.jpg" alt="">
                                </div>
                                <div class="hot_list_bottom">
                                    <p>双周之战宝典</p>
                                    <span>12天后结束</span>
                                </div>
                            </a>
                        </li>
                        <li class="col-md-3 col-sm-6">
                            <a href="#">
                                <div class="hot_list_top">
                                    <img src="img/lol_1637894889_uploadnewsImg.jpg" alt="">
                                </div>
                                <div class="hot_list_bottom">
                                    <p>每周半价</p>
                                    <span>1天后结束</span>
                                </div>
                            </a>
                        </li>
                        <li class="col-md-3 col-sm-6">
                            <a href="#">
                                <div class="hot_list_top">
                                    <img src="img/lol_1637553422_uploadnewsImg.jpg" alt="">
                                </div>
                                <div class="hot_list_bottom">
                                    <p>LPL全明星投票</p>
                                    <span>1天后结束</span>
                                </div>
                            </a>
                        </li>
                        <li class="col-md-3 col-sm-6">
                            <a href="#">
                                <div class="hot_list_top">
                                    <img src="img/lol_1637568800_uploadnewsImg.jpg" alt="">
                                </div>
                                <div class="hot_list_bottom">
                                    <p>鱼乐联盟双城季</p>
                                    <span>12天后结束</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 热门活动内容结束 -->
            <!-- 下载中心开始-->
            <div class="download col-md-5 col-sm-12">
              <div class="download_all">
                <div class="download_top">
                    <div class="download_top_left">
                    </div>
                    <div class="download_top_right">
                        <div class="download_top_right_1"><a href="#">新手必备</a></div>
                        <div class="download_top_right_2"><a href="#">领取中心</a></div>
                    </div>
                </div>
                <div class="download_bottom">
                    <ul>
                        <li><a href="#">在线客服</a></li>
                        <li><a href="#">秩序课堂</a></li>
                        <li><a href="#">游戏资料</a></li>
                        <li><a href="#">峡谷之巅</a></li>
                        <li><a href="#">云端之弈</a></li>
                        <li><a href="#">攻略中心</a></li>
                        <li><a href="#">LOL宇宙</a></li>
                        <li><a href="#">微信绑定</a></li>
                    </ul>
                </div>
              </div>
            </div>
            <!-- 下载中心结束 -->
        </div>
        <!-- 热门结束 -->
        <div class="hero row">
            <!-- 皮肤合集 -->
            <div class="hero_skin col-md-7 col-sm-12">
                <div class="hero_skin_one">
                    <p>英雄更新</p>
                    <h4>英雄薇古丝降临峡谷</h4>
                    <a href="#">愁云使者 薇古丝专题站现已上线</a>
                </div>
                <div class="hero_skin_two">
                    <p>新皮肤</p>
                    <h4>冬日里的第一杯咖啡</h4>
                    <a href="#">咖啡甜心</a>
                </div>
            </div>
            <!-- 皮肤合集结束 -->
            <!-- 版本更新详情 -->
            <div class="version col-md-5 col-sm-12">
              <div class="version_all">
                <div class="version_left">
                    <div class="version_left_top">
                    </div>
                    <div class="version_left_bottom">
                    </div>
                </div>
                <div class="version_right">
                    <div class="version_right_top"></div>
                    <div class="version_right_bottom">
                        <a href="#">周免</a>
                    </div>
                </div>
              </div>
            </div>
            <!-- 版本更新详情结束 -->
        </div>
        <!-- 视频专辑区域 -->
        <div class="game_video_bg">
            <div class="game_video row">
                <!-- 最新区域 -->
                <div class="new_video col-md-7 col-sm-12">
                    <div class="nv_tit">
                        <h2>最新</h2>
                        <ul class="nv_tit_top row">
                            <li class="check">
                                <a href="#">推荐</a>
                            </li>
                            <li>
                                <a href="#">官方</a>
                            </li>
                            <li>
                                <a href="#">娱乐</a>
                            </li>
                            <li>
                                <a href="#">赛事</a>
                            </li>
                            <li>
                                <a href="#">云顶之弈</a>
                            </li>
                            <li>
                                <a href="#">教学</a>
                            </li>
                            <li>
                                <a href="#">更多</a>
                            </li>
                            <li>
                                <a href="#">下一页</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 模块内容 -->
                    <div class="nv_con">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="img/first-2_2021-11-29_22-18-48.png" alt="">
                                </a>
                                <a href="#" class="nv_bottom">【英雄联盟】咖啡甜心 温暖寒冬</a>
                                <p id="top_video">5099次播放</p>
                                <span id="top_time">19小时前</span>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/first-2_2021-11-29_22-18-48.png" alt="">
                                </a>
                                <a href="#" class="nv_bottom">开发者日志：《双城之战》的音乐</a>
                                <p id="top_video">9359次播放</p>
                                <span id="top_time">2021-11-25</span>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/first-2_2021-11-29_22-18-48.png" alt="">
                                </a>
                                <a href="#" class="nv_bottom">双城之战7-9集彩蛋视频，你发现了多少那？</a>
                                <p id="top_video">4285次播放</p>
                                <span id="top_time">2021-11-21</span>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/first-2_2021-11-29_22-18-48.png" alt="">
                                </a>
                                <a href="#" class="nv_bottom">执事（暂议）布兰德 至臻PBE皮肤</a>
                                <p id="top_video">6299次播放</p>
                                <span id="top_time">2021-11-18</span>
                            </li>
                            <li>
                                <a href="#">
                                 <img src="img/first-2_2021-11-29_22-18-48.png" alt="">
                                </a>
                                <a href="#" class="nv_bottom">蔚的记录 探秘双城之战：议会档案馆预告片</a>
                                <p id="top_video">1200次播放</p>
                                <span id="top_time">2021-11-16</span>
                            </li>
                            <li>
                                <a href="#">
                                 <img src="img/first-2_2021-11-29_22-18-48.png" alt="">
                                </a>
                                <a href="#" class="nv_bottom">【双城之战】化身敌人的恐惧，是打败他们的唯一方法</a>
                                <p id="top_video">2679次播放</p>
                                <span id="top_time">2021-11-13</span>
                            </li>
                            <li>
                                <a href="#">
                                <img src="img/first-2_2021-11-29_22-18-48.png" alt="">
                                </a>
                                <a href="#" class="nv_bottom">EDG《孤勇者》</a>
                                <p id="top_video">2360次播放</p>
                                <span id="top_time">2021-11-13</span>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="img/first-2_2021-11-29_22-18-48.png" alt="">
                                </a>
                                <a href="#" class="nv_bottom">《孤勇者》（《英雄联盟：双城之战》动画剧集中文主</a>
                                <p id="top_video">5025次播放</p>
                                <span id="top_time">2021-11-08</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 热门专辑 -->
                <div class="hot_video fr col-md-5 col-sm-12">
                    <div class="hv_tit">
                        <h2>热门专辑</h2>
                        <ul>
                            <li><a href="#">周一</a></li>
                            <li><a href="#">周二</a></li>
                            <li><a href="#">周三</a></li>
                            <li><a href="#">周四</a></li>
                            <li><a href="#">周五</a></li>
                            <li><a href="#">周六</a></li>
                            <li><a href="#">周日</a></li>
                        </ul>
                    </div>
                    <div class="hv_con">
                        <ul class="row">
                            <li class="col-sm-4">
                                <a href="#">
                                   <div class="con_top"><img src="img/Snipaste-3_2021-11-29_23-40-12.png" alt=""></div>
                                   <div class="con_bottom">
                                       <a href="#">巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</a>
                                   </div>
                                </a>
                            </li>
                            <li class="col-sm-4">
                                <a href="#">
                                  <!-- <img src="img/Snipaste-3_2021-11-29_23-40-12.png" alt=""> -->
                                  <div class="con_top"><img src="img/Snipaste-3_2021-11-29_23-40-12.png" alt=""></div>
                                   <div class="con_bottom">
                                       <a href="#">巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</a>
                                   </div>
                                </a>
                            </li>
                            <li class="col-sm-4">
                                <a href="#">
                                <!-- <img src="img/Snipaste-3_2021-11-29_23-40-12.png" alt=""> -->
                                <div class="con_top"><img src="img/Snipaste-3_2021-11-29_23-40-12.png" alt=""></div>
                                   <div class="con_bottom">
                                       <a href="#">巅峰top5是一档精彩英雄联盟赛事集锦节目，为广大玩家带来每日LPL比赛精彩镜头</a>
                                   </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 创作馆 -->
        <div class="create_bg row">
            <div class="create_left col-md-7 col-sm-12">
                <div class="create_tit">
                    <h2 class="fl">创作馆</h2>
                    <a href="#" class="fr">更多</a>
                </div>
                <div class="create_content">
                    <ul>
                        <li class="fl">
                            <a href="#"><img src="img/wei2_2021-11-29_15-22-50.png" alt=""></a>
                        </li>
                        <li class="fl">
                            <a href="#"><img src="img/wei2_2021-11-29_15-22-50.png" alt=""></a>
                        </li>
                        <li class="fl"><a href="#"><img src="img/wei2_2021-11-29_15-22-50.png" alt=""></a></li>
                        <li class="fl"><a href="#"><img src="img/wei2_2021-11-29_15-22-50.png" alt=""></a></li>
                        <li class="fl"><a href="#"><img src="img/wei2_2021-11-29_15-22-50.png" alt=""></a></li>
                        <li class="fl"><a href="#"><img src="img/wei2_2021-11-29_15-22-50.png" alt=""></a></li>
                        <li class="fl"><a href="#"><img src="img/wei2_2021-11-29_15-22-50.png" alt=""></a></li>
                        <li class="fl"><a href="#"><img src="img/wei2_2021-11-29_15-22-50.png" alt=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="create_right fr col-md-5 col-sm-12">
                <ul>
                    <li class="create_right_one">
                        <a href="#">
                            <img src="img/0.png" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">英雄联盟用户调查</a>
                    </li>
                    <li>
                        <a href="#">见证版本历史</a>
                    </li>
                    <li>
                        <a href="#">年度品牌展示</a>
                    </li>
                    <li>合作媒体</li>
                </ul>
            </div>
        </div>
        <!-- 底部版权 -->
        <div class="endnote row">
            <div class="endnote_left col-md-4 col-sm-12">
                <img src="img/dibiaoer-2_2021-11-29_19-01-59.png" alt="">
            </div>
            <div class="endnote_right col-md-8 col-sm-12">
                <ul>
                    <li>
                        <a href="#">腾讯互动娱乐</a>
                        <span>|</span>
                        <a href="#">服务条款</a>
                        <span>|</span>
                        <a href="#">隐私保护指引</a>
                        <span>|</span>
                        <a href="#">儿童隐私保护指引</a>
                        <span>|</span>
                        <a href="#">腾讯游戏招聘 </a>
                        <span>|</span>
                        <a href="#">腾讯游戏客服</a>
                        <span>|</span>
                        <a href="#">游戏列表</a>
                        <span>|</span>
                        <a href="#">广告服务及商务合作</a>
                    </li>
                    <li>
                        <a href="#">腾讯公司版权所有</a>
                        <a href="#">网络游戏行业防沉迷自律公约</a>
                    </li>
                    <li>
                        <p>COPYRIGHT © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.</p>
                        <p>COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.</p>
                    </li>
                    <li>
                        本网络游戏适合16+岁的用户使用；为了您的健康，请合理控制游戏时间。
                    </li>
                    <li>
                        <a href="#">工商网监电子标识</a>
                        <span>|</span>
                        <a href="#">粤网文【2020】3396-195号</a>
                        <span>|</span>
                        <a href="#">（署）网出证（粤）字第054号</a>
                    </li>
                    <li>
                        批准文号：新出审字[2011]310号
                        <span>|</span>
                        文网进字[2011] 004号 
                        <span>|</span>
                        出版物号：ISBN 978-7-89989-145-2
                        <span>|</span>
                        全国文化市场同意举报电话：12318
                    </li> 
                </ul>
            </div>
        </div>
    </div>
</body>
</html>